<template>
    <div class="content">
        <h1 class="text-center">管理人员费用（含五险一金）</h1>
        <el-row :gutter="20" class="mt30">
            <el-col :span="12">项目名称：{{ project.title }}</el-col>
            <el-col :span="12" class="text-right">合同完工期{{ project.end_date }}</el-col>
        </el-row>
        <el-row :gutter="20" class="mt10">
            <el-col :span="24" class="text-right" ><el-button link type="primary" @click="onEdit(0)" size="small">添加</el-button></el-col>
        </el-row>
        <el-table class="mt10" show-summary :data="tableData" :border="true" style="width: 100%;height: 500px !important;">
            <el-table-column type="index" :index="indexMethod" label="序号" width="60" />
            <el-table-column label="姓名" show-overflow-tooltip>
                <template #default="scope">
                    <el-text >{{scope.row.user.name}}</el-text>
                </template>
            </el-table-column>
            <el-table-column prop="start_date" label="开始时间" />
            <el-table-column prop="end_date" label="结束时间" />
            <el-table-column prop="month" label="月" />
            <el-table-column prop="price" label="实发薪资" />
            <el-table-column prop="social_security" label="保险公积金" />
            <el-table-column prop="year_end_bonus" label="预留年终奖金" />
            <el-table-column prop="total" label="合计" />
            <el-table-column prop="remarks" label="备注" />
            <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                    <el-button link type="primary" @click="onEdit(scope.row)" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog v-model="isEdit" title="班组申请" width="600px">
        <el-form ref="ruleFormRef" style="width: 100%" :model="ruleForm" label-width="auto" size="large" status-icon >
            <el-form-item v-if="ruleForm.id == 0" label="选择人员" prop="user_id">
                <component :is="userAllSelect" :data=ruleForm.user_id @onUserSelect="onUserSelect" />
            </el-form-item>
            <el-form-item label="开始时间" prop="start_date">
                <el-date-picker style="width: 100%" v-model="ruleForm.start_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
            </el-form-item>
            <el-form-item label="结束时间" prop="end_date">
                <el-date-picker style="width: 100%" v-model="ruleForm.end_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
            </el-form-item>
            <el-form-item label="月" prop="month">
                <el-input v-model="ruleForm.month" />
            </el-form-item>
            <el-form-item label="实发薪资" prop="price" >
                <el-input v-model="ruleForm.price" @change="onPrice"  />
            </el-form-item>
            <el-form-item label="保险公积金" prop="social_security">
                <el-input v-model="ruleForm.social_security" @change="onPrice" />
            </el-form-item>
            <el-form-item label="预留年终奖金" prop="year_end_bonus">
                <el-input v-model="ruleForm.year_end_bonus" @change="onPrice" />
            </el-form-item>
            <el-form-item label="合计" prop="total">
                <el-text>{{ ruleForm.total }}</el-text>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
                <el-input v-model="ruleForm.remarks" type="textarea" :autosize="{ minRows: 4 }" />
            </el-form-item>
        </el-form>
        <el-divider />
        <div class="text-center">
            <el-button type="primary" @click="onSave"> 保存 </el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import http from '../../../../util/request';
import { ElMessage } from 'element-plus';
import userAllSelect from "@/components/userAllSelect.vue";
const indexMethod = (index: number) => {
  return index+= 1
}
let project:any = sessionStorage.getItem('project')
project = JSON.parse(project)
const form = ref<any>({search:'',model:'MaterialPay',page:0,current:0,total:10,limit:20,loading:false,parentBorder:false})
const isEdit = ref<boolean>(false)
const ruleForm = ref<any>({id:0})
const tableData = ref<any[]>([])

const onGetData = () => {
    
    form.value.loading = true
    tableData.value = []
    http.post('/projectUserCost',form.value).then((response:any)=>{
        form.value.loading = false
        response.data.data.forEach((e:any) => {
            e.total = parseInt(e.price) + parseInt(e.social_security) + parseInt(e.year_end_bonus)
        });
        tableData.value = response.data.data
        form.value.total = response.data.total
    })
}

const onSave = () => {
    if(ruleForm.value.user_id == 0){
        ElMessage.error('请选择人员')
        return
    }
    let request:any = null
    if(ruleForm.value.id > 0){
        request = http.patch('/projectUserCost',ruleForm.value)
    }else{
        request = http.put('/projectUserCost',ruleForm.value)
    }
    
    request.then((response:any)=>{
        if(response.data.code != 200){
            ElMessage.error(response.data.msg)
            return
        }
        onGetData()
        isEdit.value = false
    })
}

const onPrice = () => {
    ruleForm.value.total = parseInt(ruleForm.value.price) + parseInt(ruleForm.value.social_security) + parseInt(ruleForm.value.year_end_bonus)
}

const onEdit = (data:any) => {
    if(data != 0){
        ruleForm.value = data
        onPrice()
    }else{
        ruleForm.value.id = 0
        ruleForm.value.user_id = 0
        ruleForm.value.start_date = ''
        ruleForm.value.end_date = ''
        ruleForm.value.month = '/'
        ruleForm.value.price = 0
        ruleForm.value.social_security = 0
        ruleForm.value.year_end_bonus = 0
        ruleForm.value.total = 0
        ruleForm.value.remarks = '/'
    }
    
    isEdit.value = true
}
onMounted(()=>{
    onGetData()
})

const onUserSelect = (data:number) => {
    ruleForm.value.user_id = data
}
</script>

<style scoped>

</style>